{include file="public/header" /}
<style>
    .subtitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9375rem;
        font-size: 1rem;
    }

    .pro-list {
        justify-content: initial;
        flex-wrap: nowrap;
        column-gap: 0.6rem;
        overflow-x: auto
    }
    .pro-list li{
        width: calc(100% / 4);
        flex-shrink: 0;
    }
    .pro-list .pic{
        width: 100%;
        height: 5rem;
    }
    .product-list{
        margin: 1rem;
        border-radius: 1rem;
        overflow: hidden;
    }
    .product-list .item{
        background-color: #fff;
        padding: 1rem;
        display: flex;
        align-items: center;
    }
    .product-list li{
        border-bottom: 1px solid #eee;
    }
    .product-list li:last-child{
        border-bottom: none;
    }
    .product-list .item .pic{
        width: 5rem;
        margin-right: 1rem;
    }
    .product-list .item .name{
        font-size: 0.8rem;
    }
    .product-list .item .vip_price{
        font-size: 0.8rem;
        color: #f40;
    }
    .product-list .item .price{
        font-size: 0.6rem;
        color: #ccc;
        text-decoration: line-through;
    }
</style>
<body class="bgc hide-top">
<div class="pro-list-search">
    <i class="layui-icon layui-icon-left"  onclick="history.go(-1)"></i>
    <div class="rgt">
        <img src="/static/index/img/icon43.png" alt="">
        <input type="text" class="keyword" placeholder="请输入商品关键字搜索" value="{$keyword?:''}">
        <p class="flex-center search_bt">搜索</p>
    </div>
</div>
<!--<ul class="pro-list-nav">-->
<!--    <li class="active">-->
<!--        <div>综合</div>-->
<!--        <p></p>-->
<!--    </li>-->
<!--    <li>-->
<!--        <div>销量-->
<!--            <p class="flex-center">-->
<!--                <img src="/static/index/img/icon40.png" alt="">-->
<!--                &lt;!&ndash; <img src="/static/index/img/icon41.png" alt="">-->
<!--                <img src="/static/index/img/icon42.png" alt=""> &ndash;&gt;-->
<!--            </p>-->
<!--        </div>-->
<!--        <p></p>-->
<!--    </li>-->
<!--    <li>-->
<!--        <div>价格-->
<!--            <p class="flex-center">-->
<!--                &lt;!&ndash; <img src="/static/index/img/icon40.png" alt="">-->
<!--                <img src="/static/index/img/icon41.png" alt=""> &ndash;&gt;-->
<!--                <img src="/static/index/img/icon42.png" alt="">-->
<!--            </p>-->
<!--        </div>-->
<!--        <p></p>-->
<!--    </li>-->
<!--    <li>-->
<!--        <div>新品</div>-->
<!--        <p></p>-->
<!--    </li>-->
<!--</ul>-->

<div class="tpl_list"></div>

<script id="template" type="text/html">
    {{# if(d.data.length > 0){ }}
    <ul class="product-list">
        {{# for(var i = 0; i < d.data.length; i++){ }}
        <li>
            <a href="{:url('product/details')}?id={{d.data[i].id}}" class="item">
                <img lay-src="{{d.data[i].icon}}" src="{{d.data[i].icon}}" alt="" class="pic">
                <div style="flex: 1">
                    <p class="name">{{d.data[i].title}}</p>
                    <div >
                        <span class="vip_price">{{d.data[i].vip_price}}</span>
                        <span class="price">{{d.data[i].price}}</span>
                    </div>
                    <!--                    <p class="flex-layout">-->
                    <!--&lt;!&ndash;                        销量{{d.data[i].sales}}&ndash;&gt;-->
                    <!--                    </p>-->
                </div>
            </a>
        </li>
        {{# } }}
    </ul>
    {{# }else { }}
    <div class="pro-list-data">
        <img src="/static/index/img/icon44.png" alt="">
        <p>暂无搜索结果</p>
    </div>
    {{# } }}
</script>

</body>
{include file="public/footer"/}
<script>
    $(function () {
        var end = '{$keyword?:""}' ? '没有更多了' : '没有更多了';
        getFlow(1, "{:url('product/getList')}?cate_1={$cate_1?:''}&keyword={$keyword?:''}&types={$type?:''}", 'template', end);

        $(".search_bt").click(function () {
            var keyword = $(".keyword").val();
            if (!keyword) {
                layer.msg('请填写要搜索的内容');
                return false;
            }
            $(".tpl_list").empty();
            getFlow(1, "{:url('product/getList')}?cate_1={$cate_1?:''}&keyword=" + keyword, 'template', end);
        });
    })
</script>
</html>